import {
    createRouter,
    createWebHistory,
    createWebHashHistory
}
    from 'vue-router';
import First from './compontents/First.vue';
import Second from './compontents/Second.vue';
import Three from './compontents/Three.vue';
import Four from './compontents/Four.vue';
const router = createRouter({
    //通过history来控制路由
    history: createWebHistory(),
    // history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            //别名，可以直接作为路径使用，不会刷新页面
            alias: '/First',
            component: First
        },
        {
            //重定向
            path: '/99',
            //重定向，将path地址的目标改为redirect地址的目标
            // redirect:'/Second',
            //将地址定向到name为'/Second'的地址上
            redirect: { name: 'Second' }

        },
        {
            path: '/Second/:id*',
            name: 'Second',
            // alias: '/Three/Second/:id*',
            component: Second,
            //每路守卫，单独给当前路由添加的验证函数
            beforeEnter: (to, from, next) => {
                console.log(1,to);
                console.log(2,from);
                if (from.path == '/First') {
                    next()
                }
            }
        },
        {
            //参数路由,使用正则限定参数必须为一个或更多的数字
            path: '/Three/',
            component: Three,
            children: [
                {
                    path: 'Second/:id',
                    // alias:'/Second/:id*'
                    // redirect: { name: 'Second' }
                    component: Second
                }
            ]
        },
        {
            //404路由，不限定必须末尾，但便于理解
            path: '/:path(.*)',
            component: Four
        }
    ]
})
//全局守卫，当使用任意路由时都会调用当前的验证函数，
router.beforeEach((to, from, next) => {
    //next()导航守卫，除非执行，否则路由跳转无效
    // console.log(to);
    // if (to.path == '/First') {
    next()//通行证
    // }
    //返回值为boolean值,如果返回值为false则不能进入目标地址,不能与next混合使用
    // return false
})

export default router
